<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常用表单控件</title>
    <!--metroic组件中的图标start-->
    <link href="../assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
    <!--metroic组件中的图标end-->

    <!--阿里云下载的图标start-->
    <link rel="stylesheet" href="../assets/custom/css/iconfont.css"/>
    <!--阿里云下载的图标end-->

    <!--组件的依赖文件start-->   <!--base文件-->
    <link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
    <script src="../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
    <!--组件的依赖文件end-->

    <!--<link href="../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />-->
    <link
            href="../assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css"
            rel="stylesheet" type="text/css" />
    <!--metroic常用下拉列表依赖start-->
    <link href="../assets/global/plugins/bootstrap-select/css/bootstrap-select.css" rel="stylesheet" type="text/css" />
    <script src="../assets/global/plugins/bootstrap-select/js/bootstrap-select.min.js" type="text/javascript"></script>
    <script src="../assets/global/plugins/jquery-multi-select/js/jquery.multi-select.js" type="text/javascript"></script>
    <script src="../assets/pages/scripts/components-multi-select.min.js" type="text/javascript"></script>
    <!--metroic常用下拉列表依赖end-->

    <script
            src="../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js"
            type="text/javascript"></script>
    <!--可搜索下拉框依赖strat-->
    <link href="../assets/global/plugins/select2/css/select2.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/plugins/select2/css/select2-bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script src="../assets/global/plugins/select2/js/select2.full.min.js" type="text/javascript"></script>
    <script src="../assets/global/scripts/app.min.js" type="text/javascript"></script>
    <script src="../assets/pages/scripts/components-select2.min.js" type="text/javascript"></script>
    <!--可搜索下拉框依赖end-->

    <!--metroic组件风格的依赖start-->   <!--base文件-->
    <link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
    <link href="../assets/global/css/plugins.min.css" rel="stylesheet"  type="text/css" />
    <!--metroic组件风格的依赖end-->

    <script
            src="../assets/pages/scripts/components-bootstrap-switch.min.js"></script>
    <!--layui组件start-->
    <link rel="stylesheet" href="../assets/global/plugins/layui/css/layui.css"/>
    <script src="../assets/global/plugins/layui/layui.all.js"></script>
    <!--layui组件end-->

    <!--自定义公共的css start-->   <!--base文件-->
    <link rel="stylesheet" href="../assets/custom/css/changeother.css"/>
    <!--自定义公共的css end-->


    <style>
        .layui-form-checked[lay-skin=primary] i {
            border-color: #20c1dc;
            background-color: #20c1dc;
            color: #fff;
        }
        .layui-form-checkbox[lay-skin=primary]:hover i {
            border-color: #20c1dc;
        }
    </style>
</head>
<body class="contentPadding">
<div class="portlet-body">
    <div class="from_control clearfix">
        <div class="from_control_l">
            <div class="select_drop_box">
                <span class=" label_on_fl">数据同步方式:</span>
                <div class="fl" style="width: 160px">
                    <select class="bs-select form-control">
                        <option>全量</option>
                        <option>时间戳增量</option>
                        <option>比对同步</option>
                    </select>
                </div>
            </div>
            <div class="select_drop_box">
                <span class="label_on_fl">目标数据源:</span>
                <div class="select_drop fl">
                    <select id="select2-single-input-sm" class="form-control select2">
                        <optgroup label="Alaskan">
                            <option value="AK">Alaska</option>
                            <option value="HI" disabled="disabled">Hawaii</option>
                        </optgroup>
                        <optgroup label="Pacific Time Zone">
                            <option value="CA">California</option>
                            <option value="NV">Nevada</option>
                            <option value="OR">Oregon</option>
                            <option value="WA">Washington</option>
                        </optgroup>
                        <optgroup label="Mountain Time Zone">
                            <option value="AZ">Arizona</option>
                            <option value="CO">Colorado</option>
                            <option value="ID">Idaho</option>
                            <option value="MT">Montana</option>
                            <option value="NE">Nebraska</option>
                            <option value="NM">New Mexico</option>
                            <option value="ND">North Dakota</option>
                            <option value="UT">Utah</option>
                            <option value="WY">Wyoming</option>
                        </optgroup>
                        <optgroup label="Central Time Zone">
                            <option value="AL">Alabama</option>
                            <option value="AR">Arkansas</option>
                            <option value="IL">Illinois</option>
                            <option value="IA">Iowa</option>
                            <option value="KS">Kansas</option>
                            <option value="KY">Kentucky</option>
                            <option value="LA">Louisiana</option>
                            <option value="MN">Minnesota</option>
                            <option value="MS">Mississippi</option>
                            <option value="MO">Missouri</option>
                            <option value="OK">Oklahoma</option>
                            <option value="SD">South Dakota</option>
                            <option value="TX">Texas</option>
                            <option value="TN">Tennessee</option>
                            <option value="WI">Wisconsin</option>
                        </optgroup>
                        <optgroup label="Eastern Time Zone">
                            <option value="CT">Connecticut</option>
                            <option value="DE">Delaware</option>
                            <option value="FL">Florida</option>
                            <option value="GA">Georgia</option>
                            <option value="IN">Indiana</option>
                            <option value="ME">Maine</option>
                            <option value="MD">Maryland</option>
                            <option value="MA">Massachusetts</option>
                            <option value="MI">Michigan</option>
                            <option value="NH">New Hampshire</option>
                            <option value="NJ">New Jersey</option>
                            <option value="NY">New York</option>
                            <option value="NC">North Carolina</option>
                            <option value="OH">Ohio</option>
                            <option value="PA">Pennsylvania</option>
                            <option value="RI">Rhode Island</option>
                            <option value="SC">South Carolina</option>
                            <option value="VT">Vermont</option>
                            <option value="VA">Virginia</option>
                            <option value="WV">West Virginia</option>
                        </optgroup>
                    </select>
                </div>
            </div>
            <div class="layui-form">
                <input type="checkbox" name="" title="写作" lay-skin="primary" checked>
            </div>
            <div class="mt-checkbox-box">
                <label class="mt-checkbox mt-checkbox-outline"> 过滤已抽取对象
                    <input type="checkbox" value="1" name="test" checked="checked"/>
                    <span></span>
                </label>
            </div>
            <div class="demoTable">
                <div class="layui-inline data_search fl">
                    <input class="inputSmall" name="id" id="demoReload" autocomplete="off">
                </div>
                <button class="btn layui-btn blue-hoki fl" data-type="reload">搜索</button>
            </div>
        </div>
        <div class="from_control_r">
            <div class="toggle_on">
                <span class="label_on fl margin-right-10">显示空表:</span>
                <input name="status" type="checkbox" data-type="reload" data-size="mini">



                <!--class="make-switch search_switch" checked data-on-color="success" data-off-color="warning" -->
            </div>
            <button class="btn default">流程同步到引擎节点</button>
            <button class="btn default">批量启动</button>
            <div class="btn-group">
                <a href="" class="btn dark btn-outline btn-circle btn-sm dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true">新增向导
                    <span class="fa fa-angle-down"> </span>
                </a>
                <ul class="dropdown-menu pull-right">
                    <li>
                        <a href="javascript:;" class="process_tb_copy"> 表单复制

                        </a>
                    </li>
                    <li>
                        <a href="javascript:;" class="process_tb_map"> 表映射

                        </a>
                    </li>
                    <li >
                        <a href="javascript:;"> join集成

                        </a>
                    </li>
                </ul>
            </div>
        </div>

    </div>

    <div class="cd-horizontal-timeline mt-timeline-horizontal" data-spacing="60">
        <div class="timeline">
            <div class="events-wrapper">
                <div class="events">
                    <ol>
                        <li>
                            <a href="#0" data-date="16/01/2014" class="border-after-red bg-after-red selected">16 Jan</a>
                        </li>
                        <li>
                            <a href="#0" data-date="28/02/2014" class="border-after-red bg-after-red">28 Feb</a>
                        </li>
                        <li>
                            <a href="#0" data-date="20/04/2014" class="border-after-red bg-after-red">20 Mar</a>
                        </li>
                        <li>
                            <a href="#0" data-date="20/05/2014" class="border-after-red bg-after-red">20 May</a>
                        </li>
                        <li>
                            <a href="#0" data-date="09/07/2014" class="border-after-red bg-after-red">09 Jul</a>
                        </li>
                        <li>
                            <a href="#0" data-date="30/08/2014" class="border-after-red bg-after-red">30 Aug</a>
                        </li>
                        <li>
                            <a href="#0" data-date="15/09/2014" class="border-after-red bg-after-red">15 Sep</a>
                        </li>
                        <li>
                            <a href="#0" data-date="01/11/2014" class="border-after-red bg-after-red">01 Nov</a>
                        </li>
                        <li>
                            <a href="#0" data-date="10/12/2014" class="border-after-red bg-after-red">10 Dec</a>
                        </li>
                        <li>
                            <a href="#0" data-date="19/01/2015" class="border-after-red bg-after-red">29 Jan</a>
                        </li>
                        <li>
                            <a href="#0" id="test_pest" data-date="03/03/2015" class="border-after-red bg-after-red">3 Mar - 1</a>
                        </li>
                    </ol>
                    <span class="filling-line bg-red" aria-hidden="true"></span>
                </div>
                <!-- .events -->
            </div>
            <!-- .events-wrapper -->
            <ul class="cd-timeline-navigation mt-ht-nav-icon">
                <li>
                    <a href="#0" class="prev inactive btn btn-outline red md-skip">
                        <i class="fa fa-chevron-left"></i>
                    </a>
                </li>
                <li>
                    <a href="#0" class="next btn btn-outline red md-skip">
                        <i class="fa fa-chevron-right"></i>
                    </a>
                </li>
            </ul>
            <!-- .cd-timeline-navigation -->
        </div>
        <!-- .timeline -->

        <!-- .events-content -->
    </div>
</div>

</body>
<script>
    var form = layui.form;
    form.render('checkbox');
    $('[name="status"]').bootstrapSwitch({
        onText:"ON",
        offText:"OFF",
        state:true,
        onColor:"success",
        offColor:"default",
        state:true,
        onSwitchChange:function(event,state){
            if(state==true){
                empty= "on";
            }else{
                empty="off";

            }
        }
    })
    //全选
</script>

<!--&lt;!&ndash;js组件依赖文件start&ndash;&gt;-->
<!--<script src="../assets/global/plugins/jquery.min.js" type="text/javascript"></script>-->
<!--<script src="../assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>-->
<!--&lt;!&ndash;js组件依赖文件end&ndash;&gt;-->

<!--&lt;!&ndash;常用下拉框依赖start&ndash;&gt;-->
<!--<script src="../assets/global/plugins/bootstrap-select/js/bootstrap-select.min.js" type="text/javascript"></script>-->
<!--<script src="../assets/global/plugins/jquery-multi-select/js/jquery.multi-select.js" type="text/javascript"></script>-->
<!--<script src="../assets/pages/scripts/components-multi-select.min.js" type="text/javascript"></script>-->
<!--&lt;!&ndash;常用下拉框依赖end&ndash;&gt;-->

<!--<script src="../assets/global/plugins/fuelux/js/spinner.min.js" type="text/javascript"></script>-->
<!--<script src="../assets/global/plugins/bootstrap-touchspin/bootstrap.touchspin.js" type="text/javascript"></script>-->
<!--<script src="../assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>-->

<!--&lt;!&ndash;可搜索下拉框依赖文件start&ndash;&gt;-->
<!--<script src="../assets/global/plugins/select2/js/select2.full.min.js" type="text/javascript"></script>-->
<!--&lt;!&ndash;可搜索下拉框依赖文件end&ndash;&gt;-->

<!--&lt;!&ndash;metroic组件风格依赖start&ndash;&gt;-->
<!--<script src="../assets/global/scripts/app.min.js" type="text/javascript"></script>-->
<!--&lt;!&ndash;metroic组件风格依赖end&ndash;&gt;-->


<!--&lt;!&ndash;可搜索下拉框依赖文件start&ndash;&gt;-->
<!--<script src="../assets/pages/scripts/components-select2.min.js" type="text/javascript"></script>-->
<!--&lt;!&ndash;可搜索下拉框依赖文件end&ndash;&gt;-->

<!--&lt;!&ndash;layui组件start&ndash;&gt;-->
<!--<script src="../assets/global/plugins/layui/layui.all.js"></script>-->
<!--&lt;!&ndash;layui组件end&ndash;&gt;-->


</html>